<template>
  <div class="flex justify-between">
    <div
      class="filter-container flex-1 h-[52px] flex justify-between items-center px-3 bg-[#fff] rounded-lg"
      @click="showCommunityPicker = true"
    >
      <span class="truncate text-[#999] text-sm mr-2.5">{{ communityTxt }}</span>
      <van-icon name="arrow" class="text-[#2e7cff]" />
    </div>
    <div
      class="filter-container flex-1 h-[52px] flex justify-between items-center px-3 bg-[#fff] rounded-lg ml-[15px]"
      @click="handleSelectChild"
    >
      <span class="truncate text-[#999] text-sm mr-2.5">{{ communityChildTxt }}</span>
      <van-icon name="arrow" class="text-[#2e7cff]" />
    </div>
  </div>
  <van-popup v-model:show="showCommunityPicker" position="bottom">
    <van-search v-model="search" placeholder="请输入搜索关键词"  @update:model-value="onSearch" />
    <van-picker
      ref="picker"
      cancel-button-text="全部社区"
      :columns="communityList"
      value-key="label"
      @confirm="onCommunityConfirm"
      @cancel="onCommunityCancel"
    />
  </van-popup>
  <van-popup v-model:show="showCommunityChildPicker" position="bottom">
    <van-search v-model="search1" placeholder="请输入搜索关键词"  @update:model-value="onSearch1" />
    <van-picker
      ref="picker1"
      cancel-button-text="全部村/小区"
      :columns="communityChildList"
      value-key="label"
      @confirm="onCommunityChildConfirm"
      @cancel="onCommunityChildCancel"
    />
  </van-popup>
</template>

<script lang="ts">
  import { computed, defineComponent, ref } from 'vue'
  import { useGlobalStore } from '@/store/global'
  import { IdLabel } from '@/types/global'
  import { Toast } from 'vant'

  export default defineComponent({
    name: 'Community',
    props: {
      communityTxt: {
        type: String,
        default: ''
      },
      communityChildTxt: {
        type: String,
        default: ''
      }
    },
    setup(props, { emit }) {
      const picker = ref();
      const picker1 = ref();
      const search = ref('')
      const search1 = ref('')
      const store = useGlobalStore()
      const communityList = store.communityList
      const communityChildList = ref<IdLabel[]>([])
      const communityTxt = computed(() => props.communityTxt)
      const communityChildTxt = computed(() => props.communityChildTxt)

      const showCommunityPicker = ref(false) // 小区
      const onCommunityConfirm = (data: IdLabel) => {
        const { id, label } = data
        showCommunityPicker.value = false
        emit('communityTxt', { community_id: id, community: label })

        communityChildList.value = store.communityALlChild[id] // 村/小区赋值
      }
      const onCommunityCancel = () => {
        showCommunityPicker.value = false
        emit('communityTxt', { community_id: 0, community: '全部社区' })
        emit('communityChildTxt', { mch_id: '', mch: '全部村/小区' })

        communityChildList.value = [] // 村/小区赋值
      }

      const handleSelectChild = () => {
        if (communityChildList.value.length === 0) return Toast.fail('请先选择社区')
        showCommunityChildPicker.value = true
      }

      const showCommunityChildPicker = ref(false) // 小区
      const onCommunityChildConfirm = (data: IdLabel) => {
        const { id, label } = data
        emit('communityChildTxt', { mch_id: id, mch: label })
        showCommunityChildPicker.value = false
      }
      const onCommunityChildCancel = () => {
        emit('communityChildTxt', { mch_id: '', mch: '全部村/小区' })
        showCommunityChildPicker.value = false
      }

      const onSearch = (value: any) => {
        // 过滤结果
        let filter = communityList.filter((item) => {
          return item.label.indexOf(value) >= 0
        })
        picker.value.setColumnValues(0, filter)

      }

      const onSearch1 = (value: any) => {
        let filter = communityChildList.value.filter((item) => {
          return item.label.indexOf(value) >= 0
        })
        picker1.value.setColumnValues(0, filter)

      }

      return {
        picker,
        picker1,
        search,
        onSearch,
        search1,
        onSearch1,
        communityTxt,
        communityChildTxt,
        communityList,
        communityChildList,
        showCommunityPicker,
        showCommunityChildPicker,
        onCommunityConfirm,
        onCommunityCancel,
        onCommunityChildConfirm,
        onCommunityChildCancel,
        handleSelectChild
      }
    }
  })
</script>
